<template>
  <div class="app-container">
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">商品管理</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">开店审核</a></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card>
      <el-row>
        <el-form ref="details" class="operation" :model="fromData">
          <el-col :span="7">
            <el-form-item label="店铺名称:" label-width="120px">
              <el-input v-model="fromData.BusinessName" placeholder="请输入" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="行业:" label-width="130px">
              <el-select v-model=" fromData.industries" size="medium" placeholder="请选择">
                <el-option v-for="item in allIndustries" :key="item.id" :label="item.industry_name" :value="item.industry_name" /></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-button type="primary" size="small" @click="query">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="tips">
        <i class="el-icon-info" />
        审核店铺，店铺审核通过之后，店铺既可在线上上线运营，品台将正式开始对店铺进行管理
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#FAFAFA',color:'#262626'}"
      >
        <el-table-column
          prop="shop_name"
          label="店铺名称"
          width="180"
        />
        <el-table-column
          prop="industry_name"
          label="店铺行业"
          width="180"
        />
        <el-table-column
          prop="addr"
          label="店铺地址"
          width="180"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
          width="180"
        />
        <el-table-column
          prop="id"
          label="推广人ID"
          width="180"
        />
        <el-table-column
          prop="approval_sts"
          label="状态"
          width="180"
        >
          <template slot-scope="row">

            <div v-if="row.row.approval_sts==='passed'" class="Center"><i class="passed" />已通过</div>
            <div v-else-if="row.row.approval_sts==='rejected'" class="Center"><i class="rejected" />已拒绝</div>
            <div v-else class="Center"><i class="notViewed" />未查看</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注"
          width="180"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template slot-scope="{ row }">
            <el-button type="text" size="medium" @click="Popup(row)">审核</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-row>
        <el-pagination
          background
          :current-page="page.page"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="page.size"
          layout="total,prev, pager, next, sizes, jumper"
          :total="page.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <shop-details :dialog-visible=" dialogVisible" />
  </div>
</template>
<script>
import { paging } from '@/api/table.js'
import { getListData } from '@/api/shop/trade'
import { industryList } from '@/api/industry'
import shopDetails from './conponents/shopDetails.vue'

export default {
  components: {
    shopDetails
  },
  data() {
    return {
      allIndustries: [],
      fromData: {
        BusinessName: '',
        industries: ''
      },
      page: {
        page: 0,
        size: 5,
        total: 0
      },

      tableData: [{
        shop_name: '',
        industry_name: '',
        addr: '',
        mobile: '',
        id: '',
        approval_sts: '',
        remarks: ''
      }],
      dialogVisible: false,
      rowData: []
    }
  },
  created() {
    this.getShop()
    this.getAllIndustryList()
  },

  methods: {
    Popup(row) {
      this.rowData = row

      this.dialogVisible = true
    },
    async getShop() {
      try {
        const res = await getListData()
        this.page.total = res.total
        this.tableData = res.data
        const rest = await paging(this.page)
        this.tableData = rest.data
      } catch (error) {
        console.log(error)
      }
    },
    async getAllIndustryList() {
      try {
        const { data } = await industryList()
        this.allIndustries = data
      } catch (error) {
        console.log(error)
      }
    },
    reset() {
      this.fromData = {
        BusinessName: '',
        industries: ''
      }
      this.getShop()
    },
    async  query() {
      const { data } = await getListData()
      const newarr = data.filter(v => {
        if (this.fromData.industries === '') {
          return v.shop_name.includes(this.fromData.BusinessName)
        } else if (this.fromData.BusinessName === '') {
          return v.industry_name === this.fromData.industries
        } else {
          return v.shop_name.includes(this.fromData.BusinessName) && this.fromData.industries === v.industry_name
        }
      }
      )

      this.tableData = newarr
    },
    handleCurrentChange(newpage) {
      this.page.page = newpage
      this.getShop()
    },
    handleSizeChange(size) {
      this.page.size = size
      this.getShop()
    }

  }
}
</script>
<style lang="scss" scoped>
.app-container{
  .el-card {
        .operation{
          display: flex;
          align-items: top;
          justify-content: space-between;
          margin-top: 20px;
        }
    margin-bottom: 20px;
    .tips {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      margin-top: 50px;
      margin-bottom: 20px;
      font-size: 14px;
      background-color: #E6F7FF;
      border: 1px solid #BAE7FF;
      .el-icon-info{
        margin: 8px;
        color: #078FEA;
      }
    }
    .header{
      background-color: red;
    }
   .el-pagination{
      margin-top: 20px;
      display: flex;
      justify-content: center;

    }
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
  .passed {
    display: block;
    margin-right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color:#67C23A;
  }

   .rejected {
     display: block;
     margin-right: 5px;
     width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color:red;
  }
 .notViewed{
 display: block;
 margin-right: 5px;
     width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color:#909399;
 }
 .Center{
        display: flex;
        align-items: center;
 }

}
</style>

